<script setup lang="tsx">
import { ContentDetailWrap } from '@/components/ContentDetailWrap'
import { useRouter, useRoute } from 'vue-router'
import { pageProductsApi } from '@/api/Integral'
import { ElButton } from 'element-plus'
import { CrudSchema, useCrudSchemas } from '@/hooks/web/useCrudSchemas'
import { useI18n } from '@/hooks/web/useI18n'
import { useTable } from '@/hooks/web/useTable'

const { t } = useI18n()
const { go } = useRouter()
const { query } = useRoute()

const { tableRegister, tableState, tableMethods } = useTable({
  fetchDataApi: async () => {
    const { pageSize, currentPage } = tableState
    const res = await pageProductsApi({
      pageNum: unref(currentPage),
      pageSize: unref(pageSize),
      businessId: unref(query.id as any)
    })
    return {
      list: res.data.list || [],
      total: res.data.total || 0
    }
  }
})
const { total, loading, dataList, pageSize, currentPage } = tableState
const { getList } = tableMethods
getList()

const crudSchemas = reactive<CrudSchema[]>([
  {
    field: 'id',
    label: 'ID',
    search: {
      hidden: true
    },
    form: {
      hidden: true
    },
    detail: {
      hidden: true
    }
  },
  {
    field: 'goodsName',
    label: '商品名称',
    search: {
      hidden: true
    },
    form: {
      hidden: true
    },
    table: {
      width: 220,
      slots: {
        default: (data: any) => {
          const row = data.row as any
          return (
            <>
              <div class={'flex items-center'}>
                <img v-show={row.goodsImages.length} class={'w-10'} src={row.goodsImages[0]} />
                <span>{row.goodsName}</span>
              </div>
            </>
          )
        }
      }
    }
  },
  {
    field: 'amount',
    label: '商品结算价格',
    search: {
      hidden: true
    },
    form: {
      hidden: true
    }
  },
  {
    field: 'totalNum',
    label: '库存数量',
    search: {
      hidden: true
    },
    form: {
      hidden: true
    }
  },
  {
    field: 'usedNum',
    label: '已兑换数量',
    search: {
      hidden: true
    },
    form: {
      hidden: true
    }
  },
  {
    field: 'remainNum',
    label: '状态',
    search: {
      hidden: true
    },
    form: {
      hidden: true
    },
    table: {
      width: 80,
      slots: {
        default: (data: any) => {
          const row = data.row as any
          return (
            <>
              <div class={'flex items-center'}>{row.remainNum === 0 ? '已兑完' : '上架中'}</div>
            </>
          )
        }
      }
    }
  },
  {
    field: 'effectiveTime',
    label: '上架时间',
    form: {
      hidden: true
    },
    table: {
      width: 220
    }
  }
])

const { allSchemas } = useCrudSchemas(crudSchemas)
</script>

<template>
  <div class="flex w-100% h-100%">
    <ContentDetailWrap class="flex-[3] ml-20px" title="积分商品">
      <template #header>
        <ElButton @click="go(-1)">
          {{ t('common.back') }}
        </ElButton>
      </template>
      <Table
        v-model:current-page="currentPage"
        v-model:page-size="pageSize"
        :columns="allSchemas.tableColumns"
        :data="dataList"
        :loading="loading"
        @register="tableRegister"
        :pagination="{
          total
        }"
      />
    </ContentDetailWrap>
  </div>
</template>
